<!-- 编辑名片 -->
<template>
	<view class="content screen-width">
		<topBar :title="editCardName" />
		<view class="makeCard">
			<view class="userCard">
				<view class="userInfo">
					<view class="user_portrait">
						<img :src="$imgUrl + serveCard.avatar" v-if="serveCard.avatar" />
						<img src="/static/userCard/editCard.png" v-else />
						<view class="message">
							<span class="company_name">{{serveCard.companyName&&serveCard.companyName.length>15?serveCard.companyName.substring(0,14)+'...':serveCard.companyName}}</span>
							<view class="person">
								<span class="name">{{serveCard.name?serveCard.name:'请填写的姓名'}}</span>
								<span class="position">{{serveCard.position?serveCard.position:'请填写你的职务'}}</span>
							</view>
							<span class="synopsis">{{serveCard.synopsis || '暂无'}}</span>
						</view>
					</view>
					<view class="goto">
					</view>
				</view>
				<!-- 用户地址 -->
				<view class="user_address">
					<view class="userphone">
						<span>
							<image src="../../static/userCard/phone.png" mode=""></image>
							<text>{{serveCard.phoneNumber || '暂无'}}</text>
						</span><span>
							<image src="../../static/userCard/envelope.png" mode="">
								<text>{{serveCard.email || '暂无'}}</text>
						</span>
					</view>
					<view class="address">
						<image src="../../static/userCard/location.png" mode="" /><text>{{serveCard.companyAddress || '暂无'}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="editCard_main">
			<view class="title">基本信息</view>
			<view class="editCard_main_Item">
				<view class="editCard_main_Item_L">
					<van-uploader class="mt-3" :max-size="32 * 1024" :before-read="beforeRead" @oversize="onOversize">
						<image style="width:80px;height:80px;border-radius:50%" :src="serveCard.avatar ? $imgUrl + serveCard.avatar:'/static/userCard/editCard.png'"></image>
					</van-uploader>
				</view>
				<view class="editCard_main_Item_R">
					<view class="adit_name">
						<view class="user_text">姓名</view>
						<input type="text" placeholder="请输入你的姓名" v-model="serveCard.name" :disabled="options.isEdit==2">
					</view>
					<view class="adit_sex">
						<view class="user_sex">性别</view>
						<span :class="sex==1 ? 'active':''" @tap="changeSex(1)">男</span>
						<span :class="sex==0 ? 'active':''" @tap="changeSex(0)">女</span>
					</view>
				</view>
			</view>
		</view>
		<view class="userInfo_edit">
			<view class="phone">
				<span><span class="must">*</span>手机</span>
				<span class="span-right" v-if="options.isEdit == 2">{{ serveCard.phoneNumber || '暂无'}}</span>
				<input v-else type="number" placeholder="请输入常用手机" v-model="serveCard.phoneNumber">
			</view>
			<view class="phone">
				<span>邮箱</span>
				<span class="span-right" v-if="options.isEdit == 2">{{ serveCard.email || '暂无'}}</span>
				<input v-else type="text" placeholder="请输入邮箱地址" v-model="serveCard.email">
			</view>
			<view class="phone">
				<span><span class="must">*</span>公司名称</span>
				<span class="span-right" v-if="options.isEdit == 2">{{ serveCard.companyName || '暂无'}}</span>
				<input v-else type="text" placeholder="请输入公司名称" @input="getcompanyValue" v-model="serveCard.companyName">
				<view class="companyName" v-if="isShowBorder&&serveCard.companyName != ''">
					<ul>
						<li @tap="hanldecompanyName(item.companyName,item.companyId)" v-for="(item,index) in companyList" :key="index">{{item.companyName}}</li>
					</ul>
				</view>
			</view>
			<view class="phone">
				<span>职位头衔</span>
				<span class="span-right" v-if="options.isEdit == 2">{{ serveCard.position || '暂无'}}</span>
				<input v-else type="text" placeholder="请输入担任职务" v-model="serveCard.position">
			</view>
			<view class="phone">
				<span>公司地址</span>
				<span class="span-right" v-if="options.isEdit == 2">{{ serveCard.companyAddress || '暂无'}}</span>
				<input v-else type="text" placeholder="请输入公司所在地" v-model="serveCard.companyAddress">
			</view>
			<view class="phone">
				<span>个人简介</span>
				<span class="span-right" v-if="options.isEdit == 2">{{ serveCard.synopsis || '暂无'}}</span>
				<input v-else type="text" placeholder="请输入个人简介" v-model="serveCard.synopsis">
			</view>


			<view @tap="isShow" class="moreInfo">
				<span>更多信息</span>
				<image src="../../static/userCard/bottom_icon.png" mode="" v-show="!isPack"  />
				<image src="../../static/userCard/top_icon.png" mode="" v-show="isPack" />
			</view>
			<view class="seeMoreInfo" v-show="isPack">
				<view class="moreinfo_item">
					<span>业务领域</span>
					<span class="span-right" v-if="options.isEdit == 2">{{ serveCard.territory || '暂无'}}</span>
					<textarea v-else placeholder="请输入擅长或可提供的业务种类,限200字以内" maxlength="200" v-model="serveCard.territory"></textarea>
				</view>
				<view class="moreinfo_item">
					<span>合作需求</span>
					<span class="span-right" v-if="options.isEdit == 2">{{ serveCard.cooperationDemand || '暂无'}}</span>
					<textarea v-else placeholder="请输入寻求的合作需求,限200字以内" maxlength="200" v-model="serveCard.cooperationDemand"></textarea>
				</view>
				<view class="moreinfo_item">
					<span>公司简介</span>
					<span class="span-right" v-if="options.isEdit == 2">{{ serveCard.companyProfile || '暂无'}}</span>
					<textarea v-else placeholder="请填写或产品介绍,限200字以内" maxlength="200" v-model="serveCard.companyProfile"></textarea>
				</view>
				<view class="moreinfo_image">
					<span>宣传相册</span>
					<view class="text">
						公司产品介绍图 , 或团队及个人形象照片(限9张)
					</view>

					<view class="addImage">
						<view class="addBorder" v-for='(item,index) in photoAlbum' :key='index'>
							<image :src="$imgUrl + item" mode="" />
							<view class="del">
								<icon type="clear" size="16" @tap="delUserImage(index)" />
							</view>
						</view>
						<view class="add" @tap="uploadFile" v-if="photoAlbum.length<9">
							<!-- 图片位置 -->
							<image src="../../static/userCard/add.png" mode="" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="save screen-width" @tap="saveCard" v-show="options.isEdit==1 || options.isEdit==0">
			保存名片
		</view>

		<upload ref="upload" :show-cropper="showCropper" :imageFileName="imageFileName" @closeCropper="closeCropper"></upload>
<Festival></Festival>
	</view>
</template>

<script>
	import topBar from "../../components/topBar.vue";
	import {
		imgUrl
	} from "@/util/api.js";
	import {
		isWeixin,
		wxShareConfig
	} from "util/wx.js"
	import {
		uploadPictures
	} from "util/upload.js";
	import upload from "../../components/Upload.vue"
	import { isMobile } from "../../util/validator.js";
	export default {
		components: {
			topBar,
			upload
		},
		data() {
			//这里存放数据
			return {
				sex: 1,
				avatar: '',
				titleItem: "编辑名片",
				isPack: false, // 更多信息的显示内容
				isInvoice: false, // 显示更多开票信息内容
				// 保存名片信息
				serveCard: {},
				options: {}, // 接收地址传递过来的参数
				fileList: [], // 图片列表(展示)
				companyList: [], // 公司列表
				isShowBorder: false,
				//   userCard:{}, // 用户卡片
				newHeadPortrait: [],
				photoAlbum: [], // 宣传图片列表
				companyName: '',

				showCropper: false, // 截图弹窗遮罩默认隐藏
				imageAccept: "/jpg,/png,/jpeg",
				imageFileName: '',
				imgUrl: imgUrl
			};
		},
		computed: {
			editCardName() {
				if (this.options.isEdit == 2) {
					return this.serveCard.name + '的名片'
				} else {
					return '编辑名片'
				}

			}
		},
		onLoad(option) {
			this.options = option
			if (this.options.name) {
				this.serveCard.companyName = this.options.name
				this.serveCard.companyId = this.options.id
				console.log(this.companyName)
			}
			if (this.options.isEdit == 1 || this.options.isEdit == 2) {
				this.getuserCard(this.options.id)
			}
		},
		mounted() {
			// if (isWeixin) {
			// 	this.initShareConfig()
			// }
		},
		//方法集合
		methods: {
			// 获取文件后缀
			getFileSuffix(fileName) {
				console.log('文件名', fileName)
				return fileName.match(/\/\w+$/)[0].toLowerCase();
			},
			// 选择图片上传前操作，调起剪裁组件
			beforeRead(file) {
				if (!this.imageAccept.includes(this.getFileSuffix(file.type))) {
					return this.$notify('请上传 jpg/png 格式图片');
				}
				this.showCropper = true;
				this.imageFileName = file.name;
				uni.showLoading({
					title: '加载中'
				})
				// 本地图片转成base64，用于截图框显示本地图片
				// this.imageToBase64(file);
				this.$refs.upload.imageToBase64(file)
			},
			// 上传文件过大
			onOversize() {
				this.$notify('图片不能大于32k');
			},

			closeCropper(img) {
				this.showCropper = false
				this.serveCard.avatar = img
				this.avatar = img
			},


			// 点击选择性别
			changeSex(val) {
				if (this.options.isEdit == 2) {
					return
				}
				this.sex = val
			},
			// 点击修改图片
			changeUserImage() {
				if (this.options.isEdit == 2) {
					return
				}
				let _this = this
				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: 'https://bootapi.51bmj.cn/bmj-api/api/home/upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (res) => {
								let {
									data
								} = res
								data = JSON.parse(data)
								_this.serveCard.avatar = data.result
								_this.avatar = data.result
							}
						});
					}
				});
			},
			// 点击删除图片
			delUserImage(index) {
				if (this.options.isEdit == 2) {
					return
				}
				let _this = this
				uni.showModal({
					title: '提示',
					content: '确认删除此图片',
					cancelText: "考虑一下",
					success(res) {
						if (res.confirm) {
							_this.photoAlbum.splice(index, 1)
						}
					}
				});
			},
			// 上传图片
			uploadFile() {
				if (this.options.isEdit == 2) {
					return
				}
				let _this = this
				uni.chooseImage({
					count: 9,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						this.fileList = tempFilePaths
						tempFilePaths.forEach(element => {
							uni.uploadFile({
								url: 'https://bootapi.51bmj.cn/bmj-api/api/home/upload', //仅为示例，非真实的接口地址
								filePath: element,
								name: 'file',
								success: (res) => {
									let {
										data
									} = res
									// console.log(res)
									try {
										data = JSON.parse(data)
										_this.photoAlbum.push(data.result)
										if (_this.photoAlbum.length >= 10) {
											uni.showToast({
												title: '宣传公司图片最多存放9张或以下',
												duration: 2000,
												icon: "none"
											});
											_this.photoAlbum = _this.photoAlbum.slice(0, 9)
										}
									} catch (error) {
										console.log(error)
									}
								}
							});
						});
					}
				});
			},
			isShow() {
				this.isPack = !this.isPack
			},
			isInvoiceItem() {
				this.isInvoice = !this.isInvoice
			},
			// 获取公司名称
			getcompanyValue() {
				let obj = {
					area: "",
					city: "",
					companyId: "",
					companyName: this.serveCard.companyName,
					endLat: 0,
					endLng: 0,
					pageIndex: 1,
					pageSize: 10,
					province: "",
					startLat: 0,
					startLng: 0,
				};
				this.$post("/bmj-api/api/es/company/query.json", obj).then(res => {
					let {
						retCode,
						data
					} = res;
					console.log(data)
					if (retCode == 0 && data.content.length) {
						this.isShowBorder = true
						this.companyList = data.content;
					}
				})
			},
			//  点击公司名称到输入框
			hanldecompanyName(val, id) {
				this.serveCard.companyId = id
				this.serveCard.companyName = val
				console.log(this.serveCard)

				this.isShowBorder = false

			},
			// 点击保存名片
			saveCard() {
				if (!this.serveCard.name) {
					uni.showToast({
						title: '请输入你的姓名',
						duration: 2000,
						icon: "none"
					});
					return
				} else if (!this.serveCard.companyName) {
					uni.showToast({
						title: '请输入公司名称',
						duration: 2000,
						icon: "none"
					});
					return
				} else if (!this.serveCard.phoneNumber) {
					uni.showToast({
						title: '请输入你的手机号码',
						duration: 2000,
						icon: "none"
					});
					return
				}
				// if (!isMobile(this.serveCard.phoneNumber)) {
				// 	uni.showToast({
				// 		title: '请输入正确的手机号码',
				// 		duration: 2000,
				// 		icon: "none"
				// 	});
				// 	return
				// }
				this.serveCard.photoAlbum = this.photoAlbum
				this.serveCard.sex = this.sex
				if (this.options.isEdit == 1) {
					this.$post("/bmj-api/api/ums/umsBusinessCard/updateBusinessCard", this.serveCard).then(res => {
						// console.log(res)
						if (res.code == 200) {
							uni.showToast({
								title: '保存成功',
								duration: 2000,
								icon: "none"
							});
							uni.redirectTo({
								url: '/pages/person/modified?id=' + this.options.id
							});
							uni.$emit('editCard')
						}
					})
				} else {
					// 创建名片
					this.$post("/bmj-api/api/ums/umsBusinessCard/addBusinessCard", this.serveCard).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: '提交成功',
								duration: 2000,
								icon: "none"
							});
							uni.navigateBack({
								delta: 1
							});
							uni.$emit('editCard')
						} else {
							uni.showToast({
								title: res.message,
								duration: 2000,
								icon: "none"
							});
						}
					})
				}
			},
			// 获取名片信息
			getuserCard(id) {
				let that = this
				this.$get("/bmj-api/api/ums/umsBusinessCard/businessCardInfo?id=" + id).then(res => {
					if (res.code == 200 && res.result != null) {
						this.serveCard = res.result
						if (this.serveCard.id) {
							if (isWeixin()) {
								uni.webView.getEnv((res) => {
									console.log('当前环境：', res)
									if (res.miniprogram) {
										setTimeout(function() {
											that.postMessageToMini()
										}, 100);
									} else {
										that.initShareConfig()
									}
								})
							}
						}
						if (this.options.isEdit === '1') {
							this.serveCard.companyId = ''
						}
						let {
							photoAlbum
						} = res.result
						if (photoAlbum == null) {
							photoAlbum = []
						}
						if (res.result.sex !== '') {
							this.sex = res.result.sex
						}
						this.photoAlbum.push(...photoAlbum)
					} else if (res.code === 10012) {
						uni.showToast({
							title: '该名片已设置不可见',
							duration: 2000,
							icon: "none"
						});
					}
				})
			},
			postMessageToMini() {
				let _this = this
				let shareInfo = {
					shareTitle: _this.serveCard.name + '的名片',
					imgUrl: _this.serveCard.avatar ? _this.imgUrl + _this.serveCard.avatar : null,
					link: '/pages/topage/index?redirect=' + encodeURIComponent(window.location.href.replace('editCard', 'modified'))
				}
				if (window.UniAppJSBridge) {
					//向uniapp传值
					uni.webView.postMessage({
						data: shareInfo
					});
				} else {
					document.addEventListener('UniAppJSBridgeReady', function() {
						//向uniapp传值
						uni.webView.postMessage({
							data: shareInfo
						});
					});
				}
			},
			initShareConfig() {
				let _this = this
				let windowurl = window.location.href.split('#')[0];
        console.log('--------------',window.location.href.replace('isEdit=1', 'isEdit=2'))
				uni.request({
					url: 'https://oldm.51bmj.cn/WeiXin/GetClientSign', //仅为示例，并非真实接口地址。
					data: {
						rawUrl: windowurl
					},
					dataType: "json",
					header: {
						'X-Requested-With': 'XMLHttpRequest'
					},
					method: "GET",
					success: (res) => {
						if (res.statusCode == 200) {
							let {
								data
							} = res
							let shareInfo = {
								title: _this.serveCard.name + '的名片',
								desc: '政策尽知 红利尽享',
								imgUrl: _this.serveCard.avatar ? _this.imgUrl + _this.serveCard.avatar : 'https://51bmj.cn/bmj.jpg',
								link: window.location.href.replace('editCard', 'modified')
							}
							wxShareConfig(this.$wx, data, shareInfo)
						}
					}
				});
			}
		}
	};
</script>
<style lang="less" scoped>
	//@import url(); 引入公共css类
	.content {
		.makeCard {
			margin: 20rpx 30rpx;

			.userCard {
				border-radius: 10rpx;
				max-width: 690rpx;
				height: 385rpx;
				padding: 20rpx;
				background-size: 100% 100%;
				background-image: url(../../static/userCard/card_bg.png);

				.userInfo {
					padding: 40rpx 0rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.user_portrait {
						display: flex;
						align-items: center;

						img {
							width: 120rpx;
							height: 120rpx;
							border-radius: 50%;
						}

						.message {
							margin-left: 20rpx;

							.company_name {
								color: #aaaaaa;
								font-size: 22rpx;
								// max-width: 40rpx;
								// white-space:nowrap;
								// overflow:hidden;
								// text-overflow:ellipsis;
							}

							.person {
								.name {
									color: #1f7dff;
									font-size: 36rpx;
								}

								.position {
									color: #6e6e6f;
									margin-left: 30rpx;
								}
							}

							.synopsis {
								color: #aaaaaa;
								font-size: 24rpx;
							}
						}
					}

					.goto {
						image {
							width: 16rpx;
							height: 24rpx;
						}
					}
				}

				.user_address {
					.userphone {
						span {
							color: #333333;
							font-size: 20rpx;
							margin-right: 20rpx;

							image {
								margin-right: 20rpx;
								width: 18rpx;
								height: 22rpx;
							}
						}
					}

					.address {
						color: #333333;
						font-size: 24rpx;

						image {
							margin-right: 20rpx;
							width: 18rpx;
							height: 22rpx;
						}
					}
				}
			}
		}

		.editCard_main {
			background-color: #fff;
			padding: 0 20px;

			.title {
				font-size: 32rpx;
				line-height: 120rpx;
				color: #000;
				font-weight: 700;
				height: 120rpx;
			}

			.editCard_main_Item {
				display: flex;
				align-items: center;
				height: 240rpx;

				.editCard_main_Item_L {
					width: 160rpx;
					height: 160rpx;
					margin-right: 10rpx;

					.img {
						max-width: 160rpx;
						max-height: 160rpx;
						border-radius: 50%;
					}
				}

				.editCard_main_Item_R {
					margin-left: 20rpx;

					.adit_name {
						max-width: 490rpx;
						height: 120rpx;
						display: flex;
						align-items: center;

						.user_text {
							margin-right: 40rpx;
						}

						input {
							color: #333333;
							font-size: 26rpx;
						}
					}

					.adit_sex {
						max-width: 490rpx;
						height: 120rpx;
						display: flex;
						align-items: center;

						.user_sex {
							margin-right: 40rpx;
						}

						span {
							width: 100rpx;
							height: 48rpx;
							position: relative;
							text-align: center;
							margin-right: 40rpx;
							border-radius: 10rpx;
							background-color: #e8f3ff;

							&.active {
								background-color: #1f7dff;
								color: #fff;
								// &::after{
								//   position:absolute;
								//   bottom: -10rpx;
								//   right: -8rpx;
								//   content: "";
								//   width:40rpx;
								//   height: 40rpx;
								//   border-radius: 50%;
								//   // z-index: 10rpx;
								//   background-color: #1f7dff;

								// }
								// &::before{
								//     position: absolute;
								//     right: 0rpx;
								//     bottom: 10rpx;
								//     z-index: 10;
								//     border-top:none;
								//     border-left:8rpx solid #fff;
								//     border-bottom:8rpx solid #fff;
								//     content:"";
								//     width:20rpx;
								//     height: 8rpx;
								//     transform: rotate(-50deg);
								// }

							}
						}
					}
				}
			}
		}

		.userInfo_edit {
			background-color: #fff;
			padding: 0rpx 30rpx 100rpx 30rpx;
			margin-top: 20rpx;

			.phone {
				position: relative;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 120rpx;

				.must {
					color: red;
					font-size: 24rpx;
				}

				span {
					width: 158rpx;
					color: #787878;
				}

				input {
					width: 400rpx;
					font-size: 28rpx;
				}

				.span-right {
					width: 400rpx;
					font-size: 28rpx;
					text-align: left;
					display: inline-block;
					overflow: auto;
				}

				.companyName {
					width: 570rpx;
					z-index: 999;
					position: absolute;
					left: 0rpx;
					right: 0;
					// font-size:22rpx;
					top: 100rpx;

					ul {
						padding-left: 20rpx;
						width: 650rpx;
						max-height: 240rpx;
						background-color: #fff;
						overflow-y: auto;
						box-shadow: 4rpx 4rpx 10rpx rgba(54, 54, 54, .2);

						li {
							font-size: 24rpx;
							min-width: 100%;
							min-height: 80rpx;
							align-items: center;
							display: flex;

						}
					}
				}
			}

			.moreInfo {
				display: flex;
				justify-content: space-between;
				align-items: center;
				min-height: 120rpx;

				span {
					width: 140rpx;
					color: #787878
				}

				image {
					width: 24rpx;
					height: 16rpx;
				}

			}

			.moreData {
				.company {
					height: 120rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					span {
						width: 140rpx;
						color: #787878
					}

					.span-right {
						width: 400rpx;
						font-size: 28rpx;
						text-align: left;
						display: inline-block;
						overflow: auto;
					}

					input {
						width: 400rpx;
						font-size: 28rpx;
					}
				}
			}

			.seeMoreInfo {
				.moreinfo_item {
					display: flex;
					flex-direction: column;

					span {
						color: #AAAAAA;
						line-height: 80rpx;
						height: 80rpx;
						font-size: 34rpx
					}

					.span-right {
						width: 400rpx;
						font-size: 28rpx;
						text-align: left;
						display: inline-block;
						overflow: auto;
					}

					textarea {
						padding: 20rpx;
						font-size: 26rpx;
						color: #C6CAD3;
						background-color: #F8F8F8;

					}
				}

				.moreinfo_image {
					span {
						color: #AAAAAA;
						line-height: 80rpx;
						height: 80rpx;
						line-height: 80rpx;
						font-size: 34rpx
					}

					.text {
						font-size: 22rpx;
						margin: 30rpx 0;
					}

					.add {
						width: 120rpx;
						height: 120rpx;
						display: flex;
						flex-wrap: wrap;
						position: relative;
						border: 1rpx dashed #ccc;

						image {
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							width: 40rpx;
							height: 40rpx;
						}

						text {
							color: #fff;
							width: 30rpx;
							height: 30rpx;
							background-color: #6b6b6b;
							position: absolute;
							right: 0rpx;
							top: 0rpx;
							border-radius: 0 0 0 50%;
							font-size: 20rpx;
						}
					}

					.addImage {
						width: 100%;
						display: flex;
						flex-wrap: wrap;

						.addBorder {
							width: 30%;
							position: relative;
							border: 1rpx dashed #ccc;
							margin-right: 20rpx;
							margin-top: 20rpx;

							image {
								width: 100%;
								height: 200rpx;

							}

							.del {
								text-align: center;
								color: #fff;
								width: 30rpx;
								height: 30rpx;
								// background-color:#6b6b6b;
								position: absolute;
								right: 0rpx;
								top: -10rpx;
								border-radius: 0 0 0 50%;
								font-size: 20rpx;
							}
						}

						.add {
							width: 30%;
							height: 230rpx;
							display: flex;
							flex-wrap: wrap;
							position: relative;
							border: 1rpx solid #ccc;
							margin-top: 20rpx;

							image {
								position: absolute;
								top: 50%;
								left: 50%;
								transform: translate(-50%, -50%);
								width: 40rpx;
								height: 40rpx;
							}
						}
					}

				}
			}

		}

		.save {
			position: fixed;
			bottom: 0;
			left: 0;
			line-height: 88rpx;
			text-align: center;
			width: 100%;
			height: 88rpx;
			background-color: #1678ff;
			color: #fff
		}
	}

	// /deep/ .van-field--error .van-field__control, .van-field--error .van-field__control::placeholder{
	//   color:#787878
	// }
</style>
